<script setup>
 import { ref,onMounted } from 'vue'
 import VideoApi from "@/apis/VideoApi.js";
 import UrlUtil from "@/utils/Url/Url.js";

const activeIndex = ref('1')//默认1

const activeTab = ref('all')
const currentPage = ref(1)

 const videos = ref([])

onMounted(() => {
  fetchVideos();
})

 const fetchVideos = async () => {
   const res = await VideoApi.fetchUserVideo();
   console.log('视频',res);
   videos.value = res.data.videos
 }

function editVideo(id) {
  console.log(`Editing video with id: ${id}`)
}

const handleSelect = (key, keyPath) => {
  activeIndex.value = `${key}`
}


</script>

<template>
<div class="TestPage1">
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <el-menu-item index="1">全部稿件</el-menu-item>
    <el-menu-item index="2">专栏投稿</el-menu-item>
  </el-menu>
    <div class="video-list">
        <div v-for="video in videos" :key="video.id" class="video-item">
        <img :src="UrlUtil.getFullImgUrl(video.videoCover)" alt="" class="video-cover" />
<!--          <img src="http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png" >-->
        <div class="video-info">
            <h3>{{ video.videoTitle }}</h3>
            <p>{{ video.upload_time }}</p>
            <div class="video-stats">
            <span>播放 {{ video.view_count }}</span>
            <span>弹幕 {{ video.danmuCount ?  video.danmuCount : 0 }}</span>
            </div>
        </div>
        <div class="video-actions">
            <el-button type="text" @click="editVideo(video.id)">编辑</el-button>
            <el-button type="text">数据</el-button>
            <el-dropdown>
            <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>删除</el-dropdown-item>
                <el-dropdown-item>分享</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </div>
        </div>
    </div>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="videos.length"
        :page-size="3"
        v-model:current-page="currentPage"
    />
</div>
</template>

<style scoped lang="less">
.TestPage1 {
  width: 80%;
  margin: 20px auto 0 auto;
  height: calc(100% - 20px);
  //background-color: #ffffff;

  .el-menu-item{
    line-height: 64px;
    padding-bottom: 18px;
    padding-top: 26px;
    margin-left: 40px;
    font-size: 16px;
    color: #505050;
    font-weight: 500;
    background-color: white !important;
    &:hover .is-active{
      background-color: white !important;
    }
  }

  .video-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
    padding: 0 40px 20px 40px;
    //margin-bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    background-color: white;
  }

  .video-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    //padding-bottom: 10px;
    padding: 24px 0;

    img{
      -webkit-align-self: center;
      align-self: center;
      width: 154px;
      height: 87px;
      margin-right: 24px;
      border-radius: 4px;
    }
  }

  .video-cover {
    width: 120px;
    height: 80px;
    margin-right: 20px;
  }

  .video-info {
    flex: 1;

    h3 {
      font-size: 16px;
      margin: 0 0 5px;
    }

    p {
      margin: 0 0 10px;
      color: #999;
    }

    .video-stats {
      span {
        margin-right: 15px;
        color: #666;
      }
    }
  }

  .video-actions {
    display: flex;
    align-items: center;

    .el-button {
      //margin-right: 10px;
      width: 84px;
      height: 32px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex
    ;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      border: 1px solid #e7e7e7;
      border-radius: 2px;
      font-size: 14px;
      color: #505050;
      line-height: 18px;
      padding: 0;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      margin-right: 12px;
    }
  }
}
</style>
